<template>
	<view class="tixian">
		<view class="title" @click="show=!show">提现金额
		<uni-icons type="help"></uni-icons>
		</view>
		<view class="input">
			<input v-model="member.money" placeholder="提现金额" disabled="true" />
		</view>
		<view class="wx" v-if="0">
			<view class="wx-icon">
				 <uni-icons color="#07C160" class="wxicon" size="30" type="weixin" ></uni-icons>
				 提现到微信
			</view>
			<view class="bading" v-if="member.is_auth_xcx!=1" @click="wxlogin()">去绑定</view>
			<view class="bading" style="border: 0upx solid #FFFFFF;" v-if="member.is_auth_xcx==1" >已绑定</view>
		</view>
		<view class="titles" style="text-align: left;margin-top: 48upx;">现金明细</view>
		<view class="list">
			<view v-for="(item,kk) in list" @click="tap(kk)" :class="index==kk?'hong':''" class="item">{{item}}元</view>
		</view>
		<view class="lijiti" @click="tixian">立即提现</view>
		<view class="zhezhao" v-if="show"></view>
		<view class="msg" v-if="show" style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #FFF;width: 90%;;">
			<view class="msg-title" style="width: 100%;text-align: center;font-size: 32upx;font-weight: 600;margin:  48upx 0">规则说明</view>
			<view class="count">

				<p>1.平台根据活动运营能力设置不同档位的提现额度，具体以提现页面展示为准。用户每次提现时可以选择所需的一档提现额度，剩余金额可在下次满足前述提现额度时申请提现。</p>
				<p>2.一个账号每日最多可提现1次，一个设备每日最多可提现1次</p>

				<p>3.您可以选择提现到微信(若您已用微信登录，将默认绑定当前登录的微信)，经绑定后暂不支持更换提现账号，1个微信仅能绑定一个账号。</p>

			</view>
			<view class="buttons" @click="show=!show">确认</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
               value:"",
			   wx_code:"",
			   member:{
				   is_auth_xcx:1
			   },
			   list:[1,2,5,10,20,50],
			   index:-1,
			   show:false
			};
		},
		onShow() {
		this.get_wx_code()
		this.get_member()
		},
		methods: {
			tixian(){
				if(this.index==-1){
					uni.showToast({
						title:"请选择提现额度",
						icon:"none"
					})
					return false
				}
				var data={
					money:this.list[this.index]
				}
				var _this=this;
				this.$api.doRequest("post",'api/apply_withdraw',data).then(res=>{
					if(res.data.code==200){
						uni.showToast({
							title:res.data.msg
						})
						setTimeout(function(){
							_this.get_member();
						},2000)
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
					}

				})
			},
			get_wx_code(){
				var _this=this;
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
					  _this.wx_code=loginRes.code;
				  }})
			},
			wxlogin() {
					//#ifdef H5
					  uni.showToast({
					  	title:"浏览器暂不支持微信登录",
						icon:"none"
					  })
					  //#endif
					var _this=this;
					uni.showLoading({})
			uni.getUserProfile({
				desc: '获取用户信息',
				lang: 'zh_CN',
				success: res => {
			      var userinfo=res.userInfo;
				  var data={
					  code:_this.wx_code,
					  avatar:userinfo.avatarUrl,
					  nick_name:userinfo.nickName
				  }
				  _this.$api.doRequest("post",'api/wechat_mini_program_auth',data).then(res=>{

				  })
				}
			})
				},
				//获取用户信息
				get_member()
				{
					var data={

					}
					var _this=this;
					_this.$api.doRequest("post","api/userinfo",data).then(res=>{
						console.log(res.data.data)
						_this.member=res.data.data
					})
				},
				tap(index){
					if(this.member.money<this.list[index]){
						uni.showToast({
							title:"余额不足请重新选择",
							icon:"none"
						})
						return false
					}
					this.index=index;
				}
		}
	};
</script>

<style>
	.zhezhao{
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.5;
		position: fixed;
		top: 0;
		left: 0;
	}
	.buttons{
		width: 100%;
		height: 100upx;
		border-top: 1upx solid #CCCCCC;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #2586FF;
	}
	.count{
		box-sizing: border-box;
		padding: 30upx;
		padding-top: 0upx;
		border-radius: 8upx;
		color: #666666;
		font-size: 28upx;
	}
	.count p{
		margin: 40upx 0;

	}
	.hong{
		background: #FFF8F4;
		border: 1upx solid #FA5D0F !important;
	}
	.list{
		display: flex;
		width: 100%;
		box-sizing: border-box;
		margin-top: 30upx;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.list .item{
		width: 210upx;
		height: 92upx;
		border-radius: 16upx;
		border: 1upx solid #CCCCCC;
		line-height: 92upx;
		text-align: center;
		color: 34upx;
		font-weight: 700;
		margin: auto;
		margin-bottom:24upx;
	}
	.tixian{
		width: 100%;
		box-sizing: border-box;
		padding: 40upx 30upx 0 30upx;
	}
	.title{
		font-size: 28upx;
		color: #333333;
		width: 100%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.title uni-icons{
		margin-left: 10upx;
	}
	.input{
		height: 150upx;
		line-height: 150upx;
		border-bottom: 1upx solid #CCCCCC;
	}
	.input input{
		height: 100%;
		font-size: 72upx;
		color: #FF4336;
		text-align: center;
	}
	.wx{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 52upx;
	}
	.wx-icon{
		display: flex;
		align-items: center;
		font-size: 32upx;
	}
	.bading{
		width: 158upx;
		height: 56upx;
		text-align: center;
		line-height: 56upx;
		border-radius: 28upx;
		border: 2upx solid #FF4336;
		color: #FF4336;
		font-size: 26upx;
	}
	.wxicon{
		margin-right: 16upx;
	}
	.lijiti{
		width: 690upx;
		height: 88upx;
		color: #FFFFFF;
		font-size: 30upx;
		line-height: 88upx;
		border-radius: 56upx;
		position: fixed;
		bottom: 20upx;
		left: 30upx;
		text-align: center;
		background: linear-gradient(135deg, #F98148 0%, #F64A45 100%);
	}
</style>
